<template>
    <section class="todoapp">
        <header class="header">
            <h1>todos</h1>
            <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="onAddTodo">
        </header>
        <ul class="list-group">
            <li class="list-group-item" v-for="todo in todos" :key="todo.id">{{todo.title}}</li>
        </ul>
    </section>
</template>
<script lang="ts">
    import { computed, reactive, ref, watch, watchEffect, onMounted } from 'vue'
    import TodoList from '../components/TodoList.vue'
    import TodoFilter from '../components/TodoFilter.vue'
    import { useTodoState, addTodo, editTodo, doneEdit, cancelEdit, removeCompleted, removeTodo, getTodos, saveTodos } from '../utils/TodoUtils'
    export default {
        components: {
            TodoList,
        },
        setup(props, context) {
            const { todos, visibility, allDone, newTodo, editedTodo, filteredTodos, remaining } = useTodoState()
            todos.value = getTodos()
            watch(() => todos.value, (newTodos) => {
                saveTodos(newTodos)
            })
            const onAddTodo = () => {
                addTodo(todos.value, newTodo)
            }
            const onRemoveTodo = (params) => {
                removeTodo(todos.value, params.id)
            }
           
            return {
                todos,
                visibility,
                allDone,
                newTodo,
                editedTodo,
                filteredTodos,
                remaining,
                onAddTodo,
                onRemoveTodo,
            }
        }
    }
</script>
<style>
.list-group > .list-group-item:hover {
    background-color: aquamarine;
}
</style>